<template>
	<div class="mainViewBig" v-bind:style="style">
		<!--头部-->
		<div class="headerTop">
			<div class="TimeForm">
				<div class="state">
					<img src="@/assets/back_manage_img/steadyRyn.png"/>
					<div class="DateForm">
						<p>安全生产</p>
						<p><span>{{ timestap }}</span> 天 </p>
					</div>
				</div>
				<div>
					<p class="date">{{ nowDate }} {{ nowWeek }} </p>
					<p class="date">{{ nowTime }}</p>
				</div>
			</div>
			<h1 class="header-title">{{ sysInfo.sysName }}</h1>
			<div class="header-bg"></div>
			<div class="TimeForm2">
				<p class="date"><img :src="weatherImg"/>{{ weather }}</p>
			</div>
		</div>
		<div class="large-board main_new">
			<div class="content-item1">
                <dv-border-box-8>
                    <div class="nav_box">
                        <p class="all_title">订单、计划与在产</p>
                        <div class="nav_box_contain">
                            <div class="_left_part">
								<div class="box_nav">
									<p class="box_inner"><span>{{planDetail.sure}}</span></p>
									<p class="box_name">规格确认</p>
								</div>
								<div class="box_nav box_nav2">
									<p class="box_inner"><span>{{planDetail.running}}</span></p>
									<p class="box_name">计划中</p>
								</div>
								<div class="box_nav box_nav3">
									<p class="box_inner"><span>{{planDetail.paichang}}</span></p>
									<p class="box_name">订单新需求</p>
								</div>
								<div class="box_nav box_nav4">
									<p class="box_inner"><span>{{configData.data.length}}</span></p>
									<p class="box_name">今日在产</p>
								</div>
								<div class="box_nav box_nav6">
									<p class="box_inner"><span>{{planDetail.violation}}</span></p>
									<p class="box_name">违章待审批</p>
								</div>
                                <!-- <div class="flex_index">
                                    <span class="name">{{planDetail.sure}}</span>
                                    <span>规格确认</span>
                                </div>
                                <div class="flex_index">
                                    <span class="name name2">{{planDetail.running}}</span>
                                    <span>计划中</span>
                                </div>
                                <div class="flex_index">
                                    <span class="name name3">{{planDetail.paichang}}</span>
                                    <span>订单新需求</span>
                                </div>
                                <div class="flex_index">
                                    <span class="name name4">{{configData.data.length}}</span>
                                    <span>今日在产</span>
                                </div>
                                <div class="flex_index">
                                    <span class="name name5">{{planDetail.violation}}</span>
                                    <span>违章审批</span>
                                </div> -->
                            </div>
					        <dv-scroll-board :config="configData" class="zll_board zll_board_bg" />
                        </div>
                    </div>
                </dv-border-box-8>
						
			</div>
		</div>
		<div class="large-board large-board2 main_new">
			<div class="content-item2">
                <dv-border-box-8>
                    <div class="nav_box">
                        <p class="all_title">配拌投料</p>
					    <dv-scroll-board :config="configData2" class="zll_board zll_board_bg" />
                    </div>
                </dv-border-box-8>
			</div>
			<div class="content-item3">
                <dv-border-box-8>
                    <div class="nav_box">
                        <p class="all_title">全工序机台开机动态</p>
						
					    <dv-scroll-board :config="configData3" class="zll_board zll_board_bg" />
						<!-- <div>
                            <li v-for="(item,index) in gongXuVos" :key="index">
                                <span class="_left">{{item.processName}}</span>
                                <div class="_right">
                                    <span class="_right_name">{{item.itemName}}</span>
                                    <span><i>{{item.running}}</i> / {{item.total}}</span>
                                </div>
                            </li>
                        </div> -->
                    </div>
                </dv-border-box-8>
			</div>
		</div>
	</div>
</template>

<script>
import "./bigScreen.scss";
import resize from "../resize";


export default {
    name: "bigScreen",
    data() {
        return {
            style: {}, //缩放样式
            timestap: "0",
            nowTime: "",
            nowDate: "",
            nowWeek: "",
            weather: "晴  0-13 ℃",
            weatherImg: require("@/assets/back_manage_img/qingtian.png"),
            sysInfo: {sysName: "计划、生产及调度管理"},
            showIndex: 0,
            configData: {
                carousel: 'page',
                waitTime: 5000,
                headerBGC: '#0d2235',
                oddRowBGC: '#0d2235',
                evenRowBGC: '#0d2235',
                headerHeight: '50',
                align: ['center','center','center','center','center','center','center',],
                rowNum: 6,						
                header: ['品类', '计划号', '计划名称', '规格', '单件万支', '需求量（万支）', '机台'],
                columnWidth: ['200', '200', '300', '400', '200', '200', '300'],
                data: []
            },
            configData2: {
                carousel: 'page',
                waitTime: 5000,
                headerBGC: '#0d2235',
                oddRowBGC: '#0d2235',
                evenRowBGC: '#0d2235',
                headerHeight: '50',
                align: ['center','center','center','center','center','center','center','center'],
                rowNum: 6,						
                header: ['设备号', '管坯料名', '主料', '辅料', '色母', '配比', '状态', '配料时间'],
                columnWidth: ['200', '200', '200', '200', '200', '200', '200','300'],
                data: []
            },
			
            configData3: {
                carousel: 'page',
                waitTime: 5000,
                headerBGC: '#0d2235',
                oddRowBGC: '#0d2235',
                evenRowBGC: '#0d2235',
                headerHeight: '50',
                rowNum: 8,						
                header: [],
                columnWidth: ['400', '400', '300',],
                data: []
            },
			gongXuVos:[],
			planDetail:{sure:'0',paichang:'0',running:'0',violation:'0'}
        };
    },
    methods: {
        pageShow() {//页面初始宽高显示 和 页面大小改变监听
            this.style = resize.setScale();
            window.onresize = () => {
                this.style = resize.setScale();
            };
        },
        getdateFormat() {//显示时间
            var _this = this;
            let wk = new Date().getDay();
            let yy = String(new Date().getFullYear());
            let mm = new Date().getMonth() + 1;
            let dd = String(new Date().getDate() < 10 ? "0" + new Date().getDate() : new Date().getDate());
            let hou = String(new Date().getHours() < 10 ? "0" + new Date().getHours() : new Date().getHours());
            let min = String(new Date().getMinutes() < 10 ? "0" + new Date().getMinutes() : new Date().getMinutes());
            let sec = String(new Date().getSeconds() < 10 ? "0" + new Date().getSeconds() : new Date().getSeconds());
            let weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六",];
            let week = weeks[wk];
            _this.nowTime = hou + ":" + min + ":" + sec;
            _this.nowDate = yy + "." + mm + "." + dd;
            _this.nowWeek = week;
        },

		getFirstOnDutyProducts() {
			let self = this;
			self.$http({
				url: "/jinl/firstPage/getFirstOnDutyProducts",
				method: "post",
				params:{notToken:true}
			}).then(resp => {
				self.configData.data = [];
				if (resp.success) {
					let allDatas = [];
					for(let data of resp.result){
						let tables = [];
						tables[0] = data.itemTypeId;
						tables[1] = data.planCode;
						tables[2] = data.planName;
						tables[3] = data.gradeValue;
						tables[4] = data.thNumber;
						let span = '<span style="color: #38f5ff">'+data.totalNum+'</span>';
						tables[5] = span;
						tables[6] = data.jiTai;
						allDatas.push(tables);
					}
					self.configData.data = allDatas;
					self.configData = Object.assign({},self.configData);
				}
			});
		},


		getFirstLinePeiList() {
			let self = this;
			self.$http({
				url: "/jinl/firstPage/getFirstLinePeiList",
				method: "post",
				params:{notToken:true}
			}).then(resp => {
				self.configData2.data = [];
				if (resp.success) {
					let allDatas = [];
					for(let data of resp.result){
						let tables = [];
						tables[0] = data.deviceCode;
						tables[1] = data.gpName;
						tables[2] = data.zlValue;
						tables[3] = data.flValue;
						tables[4] = data.smValue;
						tables[5] = data.ratios;
						tables[6] = data.plStatusCn;
						tables[7] = data.banTimePeriod;
						allDatas.push(tables);
					}
					let distSize = 5 - allDatas.length;
					if(distSize > 0){
						for(let i =0 ;i < distSize ;i++){
							allDatas.push({});
						}
					}
					self.configData2.data = allDatas;
					self.configData2 = Object.assign({},self.configData2);
				}
			});
		},


		getFirstOrderPlanNum() {
			let self = this;
			self.$http({
				url: "/jinl/firstPage/getFirstOrderPlanNum",
				method: "post",
				params:{notToken:true}
			}).then(resp => {
				if (resp.success) {
					for(let key in self.planDetail){
						self.planDetail[key] = resp.result[key];
					}
				}
			});
		},

		getDyDeviceGongXu() {
			let self = this;
			self.$http({
				url: "/jinl/firstPage/getDyDeviceGongXu",
				method: "post",
				params:{notToken:true}
			}).then(resp => {
				self.gongXuVos = [];
				self.configData3.data = [];
				if (resp.success) {
					self.gongXuVos = resp.result||[];
					let allDatas = [];
					for(let data of resp.result){
						let tables = [];
						tables[0] = data.processName;
						tables[1] = data.itemName;
						tables[2] = '<div class="_right"><span><i>' 
							+ data.running + '</i> / ' + data.total +
							' </div>'
						allDatas.push(tables);
					}
					self.configData3.data = allDatas;
					self.configData3 = Object.assign({},self.configData3);
				}
			});
		},

		//左上方违章
		countViolationToday() {
			let self = this;
			self.$http({
				url: "/jinl/firstPage/countViolationToday",
				method: "post",
				params:{notToken:true}
			}).then(resp => {
				// self.gongXuVos = [];
				if (resp.success) {
					self.planDetail.violation = resp.result['violationCount'];
				}
			});
		},


        async getWeather() {
            let self = this;
            self.$http({
                url: "/jinl/firstPage/getForecast",
                method: "post",
                params:{cityCode:'101220701'}
            }).then(resp => {
                let result = resp.result;
                let weather = result ? result.data.forecast[0] : {};
                let high = weather.high;
                let low = weather.low;
                let type = weather.type;
                high = high.replace(/[^0-9]/gi, "");
                low = low.replace(/[^0-9]/gi, "");
                self.weather = type + low + ' - ' + high
                if (type.indexOf('雨') > -1) {
                    self.weatherImg = require('@/assets/back_manage_img/xaiyu.png');
                }
                if (type.indexOf('晴') > -1) {
                    self.weatherImg = require('@/assets/back_manage_img/qingtian.png');
                }
                if (type.indexOf('云') > -1|| type.indexOf('阴') > -1) {
                    self.weatherImg = require('@/assets/back_manage_img/tianqi.png');
                }
            });
        },
    },

    mounted() {

        let self = this;
        setInterval(() => {
        	console.log("wqq")
            self.getdateFormat();
        }, 1000);
        self.getWeather();
        setInterval(() => {
            self.getWeather();
        }, 1000 * 3600);
		self.getFirstOnDutyProducts();
		setInterval(() => {
			self.getFirstOnDutyProducts();
		}, 1000 * 60);

		self.getFirstOrderPlanNum();
		setInterval(() => {
			self.getFirstOrderPlanNum();
		}, 1000 * 46);

		self.getFirstLinePeiList();
		setInterval(() => {
			self.getFirstLinePeiList();
		}, 1000 * 55);

		self.countViolationToday();
		console.log('--------------------------')
		setInterval(() => {
			self.countViolationToday();
		}, 1000 * 55);

		self.getDyDeviceGongXu();
		setInterval(() => {
			self.getDyDeviceGongXu();
		}, 1000 * 24);
        self.pageShow()

		function calculateDaysBetweenDates(startDate, endDate) {
			const start = new Date(startDate);
			const end = new Date(endDate);
			const millisecondsPerDay = 1000 * 60 * 60 * 24;
			const days = Math.floor((end - start) / millisecondsPerDay);
			return days;
		}
		const daysSinceMayFirst = calculateDaysBetweenDates('2024-05-01', new Date().toISOString());
		this.timestap = daysSinceMayFirst.toString();
    },
};
</script>

<style scoped>
</style>
